<template>
	<view class="commentPage">
		<!-- 评价的商品 -->
		<view class="content d-flex">
			<view class="left-img">
				<image :src="orderInfo.product[0].pro_img" mode="aspectFill" style="width: 180rpx;height: 180rpx;"></image>
			</view>
			<view class="right ml-2 flex-1">
				<view class="title mt-3 d-flex j-sb a-center" style=" font-size: 30rpx;color: #333333; font-weight: 600;">
					<view class="shop"  @click="navToShop()">
						<image :src="orderInfo.shop_img" style="border-radius: 50%;" mode="aspectFill" class="order-icon"></image>
						<text class="line1-text2 font30">{{orderInfo.shop_name}}</text>
					</view>
					<text class="iconfont enterShop">&#xe600;</text>
					<!-- <image src="/static/img/emoji/106.gif" mode="" style="width: 16rpx;height: 28rpx;margin-right: 30rpx;"></image> -->
				</view>
				<view class="price d-flex j-sb a-center mt-5" style="font-size: 26rpx;">
					<view class="name">
						<text class="content-title">{{orderInfo.pro_name}}</text>
					</view>
					<view class="price-box">
						<text>￥{{orderInfo.product[0].pro_price}}</text>
					</view>
				</view>
				<view class="munber">
					<text>×{{orderInfo.product[0].pro_pronum}}</text>
				</view>
			</view>
		</view>

		<!-- 标题 -->
		<view class="comment_title d-flex a-center mt-1">
			<view class="uni-title uni-common-pl" style="font-size: 30rpx;color: #333333;font-weight: 500;">评价</view>
			<uni-rate class="star" @change="changeRank" value="5" />
		</view>

		<!-- 分享购物体验 -->
		<view class="share" style="width: 93%;height: 430rpx;border-radius: 10rpx;background-color: #fff;margin:0 auto">
			<view class="share_header ml-3 color9" style="line-height: 78rpx;font-weight: 500;border-bottom: 2rpx solid #F3F3F3;font-size: 28rpx;">
				分享你的购物体验吧
			</view>
			<view class="share_content">
				<view class="uni-textarea">
					<textarea placeholder-style="color:#999" :value="coments" @input="commitText" placeholder="感觉怎么？跟大家分享一下吧~~~" style="height: 100rpx;font-size: 28rpx;" />
				</view>
		   <view class="d-flex">
			 <view  v-for="(item,index) in imageList" :key="index">
			   <view   class="img " style="position: relative;">
				<image :src="item" mode="" style=" height: 110rpx;width: 110rpx;margin-left: 30rpx;"></image>
				<image src="/static/img/profile_img/icon_07.png" class="del"  mode="widthFix" @click="delImg(index)"/>
			   </view>
			 </view>
			 <view style="margin-left: 5%; display: flex;flex-direction: column;">
			   <image src="/static/imgs/add.png" mode="" style="height: 110rpx;width: 110rpx;" @click="uploadImg"></image>
				 <text style="color: #999999;text-align: center;font-size: 26rpx;">{{imageList.length}}/3</text>
			 </view>
		   </view>
      </view>
        <!-- 单选 -->
      <view class="anonymous" style="margin-top: 10upx;">
        <label class="radio" @click="checked">
          <radio value="1" style="transform: scale(.7);" :checked="isChecked"/><text class="color6" style="font-size: 28rpx;">匿名评价</text>
        </label>
      </view>
    </view>
    
    <!-- 底部列表 -->
    <view class="share_list mt3-auto color6" style="border-radius: 10upx;width: 93%;height: 303rpx;background-color: #fff;padding: 59rpx 0 0 30rpx;box-sizing: border-box;">
      <view class="list_item d-flex font-md mb-2">
        <text>商品符合度</text>
        <uni-rate class="star" @change="changeprorank" value="5"/>
      </view>
      <view class="list_item d-flex font-md mb-2">
        <text>商家服务度</text>
        <uni-rate class="star" @change="changeShopattitude" value="5"/>
      </view>
      <view class="list_item d-flex font-md mb-2">
        <text>物流速度</text>
        <uni-rate class="star" @change="changeLogistics" value="5"/>
      </view>
    </view>
    
    <view class="btn" @click="submit">
      提交
    </view>
  </view>
</template>

<script>
  // import myIssue from '@/components/myIssue/myIssue.vue'
  import uniRate from '@/components/uni-rate/uni-rate'
  export default{
    data(){
      return{
        imageList:[],
        isChecked:false,
		orderInfo:{},
		rank:5,//评价商家
		commimg:[],//评价图片
		coments:"",//评价内容
		ishidename:0,//是否匿名评价0显名1匿名评价，默认0
		prorank:5,//商品符合度1-5
		shopattitude:5,//商家服务态度1-5
		deliveryspeed:5,//物流速度1-5
      }
    },
	onLoad(id) {
		let orId = JSON.parse(id.id)
		this.evaluation(orId)
	},
    components:{uniRate},
    methods:{
		navToShop(){
			let id = this.orderInfo.shop_id
			uni.navigateTo({
				url: '/pages/user/storedetails?shid=' + JSON.stringify(id)
			})
		},
		changeRank(value){
			this.rank = value.value
		},
		changeprorank(value){
			this.prorank = value.value
		},
		changeShopattitude(value){
			this.shopattitude = value.value
		},
		changeLogistics(value){
			this.deliveryspeed = value.value
		},
		commitText(e){
			this.coments = e.detail.value
			console.log(this.coments)
		},
		async evaluation(orId){
			let res = await this.$http.evaluationOrder({
				order_id: orId
			});
			this.orderInfo = res.data
		},
      // 上传图片
      uploadImg(){
        const self = this
        uni.chooseImage({
          count: 3, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
		   success: (res) => {
			this.shopImg = res.tempFilePaths[0]
			uni.uploadFile({ //图片上传
				url: this.$common.baseUrl.setUploadImg, 
				filePath: res.tempFilePaths[0],
				name: 'file',
				formData: {},
				success: (res) => {
					let img = JSON.parse(res.data)
					console.log(img)
					this.commimg.push(img.data.file)
					if(this.imageList.length<3){
						this.imageList.push(img.data.file)
					}else{
						this.imageList = []
						this.imageList.push(img.data.file)
						this.commimg = []
						this.commimg.push(img.data.file)
					}
					console.log(this.assessCommit)
				},
				fail: (e) => {
		   
				}
			});
		   }
        })
      },
      checked(){
        this.isChecked =  !this.isChecked
		if(this.isChecked == true){
			this.ishidename = 1
		}else {
			this.ishidename = 0
		}
      },
      
     async submit(){
		 console.log(this.orderInfo)
		let res = await this.$http.commitAssess({
			coments:this.coments,
			rank:this.rank,
			commimg:this.commimg,
			ishidename:this.ishidename,
			prorank:this.prorank,
			shopattitude:this.shopattitude,
			deliveryspeed:this.deliveryspeed,
			order_id:this.orderInfo.orid,
			product_id:this.orderInfo.product
		});
		if(res.code == 200){
			uni.showModal({
			    content: '感谢您对我们的支持！我们会继续努力的，谢谢!',
			    confirmText: '完成',
			    showCancel: false,
			    success: function (res) {
			        if (res.confirm) {
						let id = 5
						uni.setStorageSync('user-orderId', id);
						uni.navigateTo({
							url: '/pages/user/assess?id=1'
						})
			        }
			    }
			});
		}else{
			uni.showToast({
				title: res.message,
				icon: 'none',
				duration: 2000
			});
		}
     
      }, 
		delImg(index){
			this.imageList.splice(index,1)
		}	 
    },
    // onShow() {
    //     /* 隐藏凸起图标 */
    //     var icon = plus.nativeObj.View.getViewById("icon");
    //     setTimeout(function() {
    //         icon.hide();
    //     }, 100);
    // },
  }
</script>

<style lang="scss" scoped>
  .content{
    width: 93%;
    border-radius: 10upx;
    background-color: #fff;
    margin: 0 auto 20upx;
	height: 210rpx; 
	border-bottom: 2rpx solid #F3F3F3;
	margin:26rpx 24rpx 0 26rpx;
  }
  .left-img{
	  padding: 15upx 15upx 0 15upx;
  }
  
  .btn{
    width: 221upx;
    height: 73upx;
	background-color: #ff496f;
    border-radius: 37upx;
    color: #FFFFFF;
    line-height: 73upx;
    text-align: center;
    font-size: 36upx;
    margin: 20upx auto 0;
  }
  
  .del{
	  width: 40upx;
	  height: 40upx;
	  position: absolute;
	  top: 0upx;
	  right:0upx;
  }
	.comment_title{
		padding-top:40upx;
		padding-bottom: 27upx;
		padding-left: 30upx;
		display: flex;
		align-items: center;
		.star{
			margin-left: 28upx;
		}
	}
	.uni-textarea{
		padding-left: 30upx;
		padding-top: 28upx;
	}
	.list_item{
		display: flex;
		justify-content: space-between;
		&>text{
			margin-right: 28upx;
		}
		.star{
			margin-right:230upx;
		}
	}
	.anonymous{
		padding-left: 30upx;
		.radio{
			display: flex;
			align-items: center;
			&>radio{
				color:#ff496f;
			}
		}
	}
	.iconfont{
		margin-right: 25upx;
		color: #999999;
	}
	.shop{
		.order-icon{
			margin-right: 10upx;
			width: 54upx;
			height: 54upx;
		}
	}
	.price{
		margin-top: 15upx;
		.name{
			.content-title{
				width: 333upx;
				display: flex;
			}
		}
		.price-box{
			margin-right: 25upx;
		}
	}
	.munber{
		text-align: right;
		margin-right: 25upx;
		font-size: 24upx;
	}
	.share_header{
		color: #000000 !important;
	}
	
</style>
